<template>
  <div class="navBar">
    <van-nav-bar left-arrow @click-right="toUserInfo">
      <template #left>
        <slot name="left">
          <van-icon name="arrow-left" />
          <span class="left-text" @click="goBackClick">{{ leftText }}</span>
        </slot>
      </template>
      <template #title>
        <slot name="title">
          <span class="title">{{ title }}</span>
        </slot>
      </template>
      <template #right>
        <slot name="right">
          <i class="right-icon" />
        </slot>
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup>

import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const props = defineProps({
  leftText: {
    type: String,
    default: '返回'
  },
  title: {
    type: String,
    default: '标题'
  }
})
let name = ref("")
const route = useRoute()
const router = useRouter()
const toUserInfo = () => {
  console.log(1);
}
const goBackClick = () => {
  router.back()
}
watch(route, (newRoute) => {
  name.value = newRoute.meta.title
}, {
  immediate: true
})
</script>

<style lang="less" scoped>
.navBar {
  .left-text {
    color: var(--primary-color);
    font-size: 14px;
  }

  .title {
    color: var(--primary-color)
  }

  .right-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-image: url(@/assets/img/home/icon-right-menu.png);
    background-size: 20px 15px;
  }
}
</style>